<template>
  
    <div class="com_main">
      <!-- 头部标题或按钮 -->
      <div class="com-title mb20">
        <div class="com-title_lable"></div>
        <div class="title-text">元数据分析</div>
          <el-button> 刷新</el-button>
          <el-button class="btn-blue"> 查询</el-button>
          <el-button> 清空</el-button>
          <el-button @click="isShow = !isShow">{{ isShow == true ? "收起" : "展开" }}</el-button>
      </div>
      <!-- 表单部分 -->
      <el-form class="mr40 ml20" :model="list" label-width="124px" v-if="isShow" >
        <el-row  class="flex-wrap pr20" type="flex" :gutter="20">
          <el-col :span="8">
            <el-form-item prop="CXFW" label="单行输入">
              <el-input v-model="list.input" placeholder="请选择" clearable
                class="item" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="CXFW" label="数字输入">
              <el-input-number v-model="list.numInput" placeholder="请选择" clearable
                class="item" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item prop="CXFW" label="开关">
              <el-switch v-model="list.switch" placeholder="请选择" clearable
                class="item" />
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item prop="CXFW" label="下拉选择">
              <el-select v-model="list.select" placeholder="请选择" clearable
                class="item" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="CXFW" label="级联选择">
              <el-cascader v-model="list.cascader" placeholder="请选择" clearable
                class="item" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="CXFW" label="日期选择">
              <el-date-picker v-model="list.time" placeholder="请选择" clearable
                class="item" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="CXFW" label="时间选择"> 
              <el-time-picker v-model="list.uploadFz" placeholder="请选择" clearable
                class="item" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item prop="CXFW" label="文件上传"> 
              <pf-UploadFz v-model="list.uploadImg" :buttonText="'上传文件'" clearable :limit="9"
                class="item" />
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="8">
            <el-form-item prop="CXFW" label="图片上传"> 
              <pf-UploadImg v-model="list.time" clearable :limit="9"
                class="item" />
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="8">
            <el-form-item prop="CXFW" label="颜色选择"> 
              <el-color-picker v-model="list.colorPicker" clearable
                class="item" />
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="8">
            <el-form-item prop="CXFW" label="评分"> 
              <el-rate v-model="list.rate" clearable
                class="item" />
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="8">
            <el-form-item prop="CXFW" label="滑块"> 
              <el-slider v-model="list.slider" clearable
                class="item" />
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="8">
            <el-form-item prop="CXFW" label="富文本"> 
              <pf-Quill v-model="list.editor" clearable placeholder="请输入"
                class="item" />
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="8">
            <el-form-item prop="CXFW" label="链接"> 
              <pfLink v-model="list.link" clearable content="文本链接" href="" target="_self"
                class="item" />
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item prop="CXFW" label="按钮">
              <pf-button v-model="list.button" placeholder="请选择" buttonText="按钮" type="" align="left"
                class="item" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8">
            <el-form-item prop="CXFW" label="文本">
              <pf-Text v-model="list.pfText" :value="'这是一段文字'" :textStyle="textStyle"
                class="item" />
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="8">
            <el-form-item prop="CXFW" label="提示">
              <el-alert v-model="list.alert" title="提示" type="success" :show-icon="true"
                class="item" />
            </el-form-item>
          </el-col> -->
          <el-col :span="8">
            <el-form-item prop="CXFW" label="组织选择">
              <com-select v-model="list.comSelect" :multiple="true" :clearable="false" :disabled="false"
                class="item" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="CXFW" label="部门选择">
              <dep-select v-model="list.depSelect" placeholder="请选择" clearable :multiple="true"
                class="item" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="CXFW" label="用户选择">
              <user-select v-model="list.userSelect" placeholder="请选择" clearable :multiple="true"
                class="item" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="CXFW" label="角色选择">
              <roleSelect v-model="list.roleSelect" placeholder="请选择" clearable :multiple="true"
                class="item" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="CXFW" label="下拉树形">
              <pf-TreeSelect :options="treeData" v-model="list.treeSelect" :placeholder="'请选择'"
                :clearable="true" :disabled="false"  lastLevel lastLevelKey='type'
                :multiple="false">
              </pf-TreeSelect>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="CXFW" label="下拉表格">
              <popupTableSelect v-model="list.popupTableSelect"
                :placeholder="'请选择'" :interfaceId="'fdea3d218549867c2c3c004c9e1984aa'"
                :columnOptions="columnOptions"
                :filterable="false" :multiple="false"
                :clearable="false" :disabled="false" />
            </el-form-item>
          </el-col>
          
          <!-- <el-col :span="8">
            <el-form-item prop="dadaY" label="接口">
              <el-input v-model="list.dadaY" readonly >
              <template slot="suffix">
                <i class="iconfont icon-xuanze click-icon"></i>
              </template>
              </el-input>
            </el-form-item>
          </el-col>
            <el-col :span="8">
              <el-form-item prop="bgrq" class="row-data right-icon" label="变更日期" >
                <div class="display-flex">
                  
                  <el-date-picker
                    class="flex-1" v-model="list.data1" type="date" placeholder="选择日期" />
                  <div class="mlr5">-</div>
                  <el-date-picker class="flex-1" v-model="list.data2" type="date" placeholder="选择日期" />
                </div>
              </el-form-item>
            </el-col>
          <el-col :span="8">
            <el-form-item prop="CXFW" label="查询范围">
              <el-select v-model="value" placeholder="请选择" class="width-100" >
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" > </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="CXFW" label="元数据类型">
              <el-input v-model="list.CXFW"  />
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
            <div class="com-title mb10">
              <div class="com-title_lable"></div>
              <div class="title-text">元数据分析</div>
            </div>
            <!-- <el-table border class="tab-header mb20" :data="list1">
              <el-table-column type="index" label="序号" width="55"> </el-table-column>
              <el-table-column prop="code" label="编码"></el-table-column>
              <el-table-column prop="name" label="名称"></el-table-column>
              <el-table-column prop="modelId" label="名称"></el-table-column>
              <el-table-column prop="createDate" width="160" label="创建时间"  ></el-table-column>
            </el-table> -->
            <pf-table v-loading="listLoading" :data="list1" :border="false"
              :hasNO="false">
              <el-table-column type="index" label="序号" width="55"> </el-table-column>
              <el-table-column prop="code" label="编码"></el-table-column>
              <el-table-column prop="name" label="名称"></el-table-column>
              <el-table-column prop="modelId" label="名称"></el-table-column>
              <el-table-column prop="createDate" width="160" label="创建时间"  ></el-table-column>
            </pf-table>
            <!-- <div class="com-title mb10">
              <div class="com-title_lable"></div>
              <div class="title-text">元数据分析</div>
              <el-button @click="addRespTableInput()">添加行</el-button>
              <el-button> 删除行</el-button>
            </div> -->
            <!-- <el-table :data="listData" border :tree-props="{ children: 'children', hasChildren: 'hasChildren' } " row-key="name" header-row-class-name="tab-header">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column type="index" label="序号" width="50"></el-table-column>
              <el-table-column label="IP地址" class-name="table-column-flex">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.ipAddress" :placeholder="'请输入白名单地址'" @blur.native.capture="validateNumber($event, scope.row)" ></el-input>
                </template>
              </el-table-column>
              <el-table-column label="IP地址">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.ipAddress" :placeholder="'请输入白名单地址'" @blur.native.capture="validateNumber($event, scope.row)" ></el-input>
                </template>
              </el-table-column>
              <el-table-column fixed="right" width="220">
                <template slot="header" slot-scope="scope">
                </template>
                <template slot-scope="scope">
                  <el-button type="danger" plain @click="deleteRespTableInput(scope.row, scope.$index)" >移除 </el-button>
                </template>
              </el-table-column>
            </el-table> -->
      <!-- <el-pagination
        class="text-center mt10"
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="listData.currentPage"
        :page-sizes="[5, 10, 20, 50, 100]"
        :page-size="listData.pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination> -->
      
  </div>
    
        
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
      listLoading: false,
      list:{
        input:'1111'
      },
      list1: [],
      textStyle: {
        color: "#000000",
        "text-align": "left",
        "font-weight": "normal",
        "font-style": "normal",
        "text-decoration": "none",
        "line-height": 32,
        "font-size": 12
      },
      totalPage:10,
      listData:{
        pageSize:10,
        currentPage:1
      },
      treeData:[
        {
          id: "1",
          fullName: "选项1",
          children: [
            {
              id: "2",
              fullName: "选项1-1"
            }
          ]
        }
      ],
      columnOptions: [

      ],
    }
  },
  // mounted() {
  //   let res =  this.$el.querySelectorAll('.el-input__inner')
  //   console.log(res)
  //   res.forEach(element => {
  //     element.setAttribute('readonly','readonly')
  //   });
  // },
  methods: {
    sizeChangeHandle() {},
    currentChangeHandle() {},
    addRespTableInput() {},
  }
}
</script>

<style>
/* .rowspan {
  display: flex;
  justify-content: space-around;
} */
</style>